<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>SHOP今日推荐</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				border: 2px solid blue;
				margin-top: 100px;
				margin-left: 40%;
				overflow: hidden;
				width: 300px;
				height: 420px;
				border:1px solid darkgray;
				border-radius: 10px;
				position: relative;
			}
			div ul li {
				list-style: none;
			}
			img:nth-of-type(1){
				float: left;
			}
			ul:nth-of-type(1){
				float: left;
			}
			img:nth-of-type(2){
				clear: both;
				float: left;
			}
			ul:nth-of-type(2){
				float: left;
			}
			img:nth-of-type(3){
				clear: both;
				float: left;
			}
			ul:nth-of-type(3){
				float: left;
			}
			img:nth-of-type(4){
				clear: both;
				float: left;
			}
			ul:nth-of-type(4){
				float: left;
			}
			div img{
				margin-right: 20px;
				margin-left: 20px;
				margin-top: 20px;
			}
			div ul{
				margin-right: 20px;
				margin-left: 20px;
				margin-top: 20px;
			}
			div h1{
				font-size: 23px;
				font-weight: 500;
				margin-top: 10px;
				margin-left: 20px;
			}
			div h1 span{
				color: red;
			}
			#post1 {
				position: absolute;
				left:100px;
				top:-100px;
				height: 50px;
				border: 0px;
			}
			#post2 {
				position: absolute;
				left:-60px;
				top:-70px;
				border: 0px;
			}
			div ul li a{
				color: red;
			}
		/*鼠标悬停超链接不变色，怎么回事？？？？*/
		</style>
	</head>
	<body>
		<div>
			<h1><span>SHOP </span> 今日推荐</h1>
			<img src="img/img9.gif" />
			<ul >
				<li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>
			</ul>
			<img src="img/img7.gif" />
			<ul>
				<li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>
			</ul>
			
			<img src="img/img8.gif">
			<ul>
				<li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>
			</ul>
			
			<img src="img/img7.gif">
			<ul>
				<li><a href="#">汉来国际美食百货</a></li>
				<li>口味：创意中餐</li>
				<li>区域：朝阳/CBD</li>
			</ul>
			<div id="post1">
				<img src="img/more.gif"/>
			</div>
			<div id="post2">
				<img src="img/shen.png" />
			</div>
		</div>
	</body>
</html>
